<script>
  var title = "Sage Hall 3303"
  note_left = ""
  note_right = "seat 1 is on the right, when facing the screen"

  var config = {{ seating_config|raw }};
</script>

<style>
  #diagram {
    border: 1px solid #d3d3d3;
  }
</style>

<div>
  <canvas id="diagram" width="900" height="520">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
  {#<img id="image">#}
  {#<pre id="seats"></pre>#}

  <script>
    var seats = {
      "left" :   [5,7,7,7,7,6,6,5,5,4,3,3,3,2,2,0,0,0],
      "middle" : [6,7,8,9,10,10,11,11,12,13,15,15,16,5,3,0,0,0],
      "right" :  [5,7,7,7,6,6,6,4,4,4,3,3,3,2,2,0,0,0],

      //"left" :  [3, 4, 4, 4, 3, 3, 3, 2, 2, 2, 2, 2, 2, 1, 1],
      //"right" : [3, 4, 4, 4, 4, 3, 3, 3, 3, 2, 2, 2, 2, 1, 1],
    }
    var used = {};

    function expand_config(config) {
      expanded = {}
      try {
        for(var section in config) {
          expanded[section] = {}
          for(var letter in config[section]) {
            // config[section][letter]["rows"].sort();
            for(var index = 0; index < config[section][letter]["rows"].length; index++) {
              row = config[section][letter]["rows"][index];
              color = config[section][letter]["color"];
              expanded[section][row] = {
                "letter": letter,
                "color": color,
              }
            }
          }
        }
      }
      catch(err) {
        throw new Error("Invalid config");
      }
      return expanded
    }

    function find_angle(x_start, y_start, x_end, y_end) {
      return Math.atan2((y_end - y_start) , (x_end - x_start));
    }

    function find_point(x, y, radius, angle){
      return [x + Math.cos(angle) * radius, y + Math.sin(angle) * radius];
    }

    function render_arrow_head(x, y, angle, width, height) {
      var half_width = width / 2.0;
      var half_height = height / 2.0;
      ctx.translate(x, y);
      ctx.rotate(angle);
      ctx.translate(-1.0 * half_width, -1.0 * half_height);
      ctx.beginPath();
      ctx.moveTo(0.0, 0.0);
      ctx.lineTo(0.0, height);
      ctx.lineTo(width, half_height);
      ctx.closePath();
      ctx.fill();
      ctx.translate(half_width, half_height);
      ctx.rotate(-angle);
      ctx.translate(-1.0 * x, -1.0 * y);
    }

    function render_arrow(section) {
      if(section == "left") {
        var row = 16;
        var angle = Math.PI * 0.95;
        var angle_start = Math.PI * 0.442 + (row * 0.00145);
        var angle_end   = Math.PI * 0.465;
      }
      else if(section == "middle") {
        var row = 16;
        var angle = Math.PI * 1.03;
        var angle_start = Math.PI * 0.475;
        var angle_end   = Math.PI * 0.525;
      }
      else if(section == "right") {
        var row = 16;
        var angle = Math.PI * 1.05;
        var angle_start = Math.PI * 0.535;
        var angle_end   = Math.PI * 0.558 - (row * 0.00145);
      }
      else {
        console.log("Invalid section: " + section + " (skipping)");
      }

      var radius = BASE_ROW_RADIUS + row * 20;
      var width = 1;
      var color = BASE_ROW_COLOR;
      ctx.setLineDash([]);

      // Draw row
      ctx.beginPath();
      ctx.arc(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_start, angle_end);
      ctx.lineWidth = width;
      ctx.strokeStyle = color;
      ctx.stroke();

      point = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_end);
      render_arrow_head(point[0], point[1], angle, 10, 10);
    }

    function render_section_row(section, row) {
      var radius = BASE_ROW_RADIUS + row * 20
      var width = BASE_ROW_WIDTH

      if(section == "middle" && row >= 14) {
        var angle_start = Math.PI * 0.475;
        var angle_end   = Math.PI * 0.510;
        // Draw row
        ctx.beginPath();
        ctx.setLineDash([]);
        ctx.arc(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_start, angle_end);
        ctx.lineWidth = width;
        ctx.strokeStyle = "#333333";
        ctx.stroke();
      }

      try {
        var empty = false;
        var color = expanded[section][row]["color"];
        ctx.setLineDash([]);
      }
      catch(err) {
        var empty = true;
        var color = BASE_ROW_COLOR
        ctx.setLineDash([10, 10]);
      }

      // Draw row
      ctx.beginPath();
      ctx.arc(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_start, angle_end);
      ctx.lineWidth = width;
      ctx.strokeStyle = "#333333";
      ctx.stroke();

      if(section == "left") {
        var angle_start = Math.PI * 0.442 + (row * 0.00145);
        var angle_end   = Math.PI * 0.465;

        angle_avg = (angle_start + angle_end) * 0.5;
        var offset = 4.0 * (Math.PI / radius)
        point = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_start - offset);
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, point[0], point[1], 100);
      }
      else if(section == "middle") {
        var angle_start = Math.PI * 0.475;
        var angle_end   = Math.PI * 0.525;

        point = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_end * 1.01);
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, point[0], point[1], 100);

        point = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_start * 0.99);
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, point[0], point[1], 100);

        if(row <= 13) {
          var angle_start = Math.PI * 0.475;
          var angle_end   = Math.PI * 0.525;
        }
        else {
          var angle_start = Math.PI * 0.512;
          var angle_end   = Math.PI * 0.525;
        }
      }
      else if(section == "right") {
        var angle_start = Math.PI * 0.535;
        var angle_end   = Math.PI * 0.558 - (row * 0.00145);

        angle_avg = (angle_start + angle_end) * 0.5;
        var offset = 5.0 * (Math.PI / radius)
        point = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_end + offset);
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, point[0], point[1], 100);
      }
      else {
        console.log("Invalid section: " + section + " (skipping)");
      }

      // Draw row
      ctx.beginPath();
      ctx.arc(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_start, angle_end);
      ctx.lineWidth = width;
      ctx.strokeStyle = color;
      ctx.stroke();

      angle_avg = (angle_start + angle_end) * 0.5;
      point_avg = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_avg);

      if(DRAW_ROW_CENTER_LABELS) {
        // Draw row label
        point = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius - 9, angle_avg);
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, point[0], point[1], 100);
      }

      // Draw points
      if( ! empty) {
        if(! (section == "middle" && row >= 14)) {
          letter = expanded[section][row]["letter"]
          if( ! ("points" in config[section][letter])) {
            config[section][letter]["points"] = []
          }
          if( ! (letter in used)) {
            used[letter] = 0
          }
          config[section][letter]["points"].push(point_avg);
          used[letter] += seats[section][row - 1];
        }

        if(DRAW_ROW_BLACK_DOTS) {
          if(row <= 4) {
            limit = 1
          }
          else if(row <= 8) {
            limit = 2
          }
          else if(row <= 12) {
            limit = 3
          }
          else {
            limit = 5
          }

          for(var multiplier = 0; multiplier < limit; multiplier++)
          {
            var offset = 8.1 * (Math.PI / radius)
            // var offset = (angle_end - angle_start) * 0.15
            point = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_start + multiplier * offset);
            ctx.beginPath();
            ctx.arc(point[0], point[1], BASE_POINT_RADIUS, 0.0, 2.0 * Math.PI);
            ctx.fillStyle = "#333333";
            ctx.fill();
          }
        }

        //point = find_point(BASE_ROW_CENTER, BASE_ROW_HEIGHT, radius, angle_end);
        //ctx.beginPath();
        //ctx.arc(point[0], point[1], BASE_POINT_RADIUS, 0.0, 2.0 * Math.PI);
        //ctx.fillStyle = "#d000d0";
        //ctx.fill();
      }
    }

    function render_row(row) {
      render_section_row("left", row);
      render_section_row("middle", row);
      render_section_row("right", row);
    }

    function render_section(section) {
      for(var row = 1; row <= BASE_NUM_ROWS; row++) {
        render_section_row(section, row);
      }
    }

    function render_zone_labels(config) {
      try {
        for(var section in config) {
          for(var letter in config[section]) {
            var num_points = config[section][letter]["points"].length;
            var total_x = 0.0;
            var total_y = 0.0;
            for(var index = 0; index < num_points; index++) {
              point = config[section][letter]["points"][index];
              total_x += point[0];
              total_y += point[1];
            }

            total_x /= num_points;
            total_y /= num_points;

            message = letter + " (rows " + config[section][letter]["rows"][0] + "-" + + config[section][letter]["rows"][num_points - 1] + ")"
            ctx.font = "bold 12pt sans-serif";

            var width = ctx.measureText(message).width + 20.0;
            var height = 24.0
            var width_half = width / 2.0;
            var height_half = height / 2.0;
            ctx.fillStyle = "#333333";
            ctx.fillRect(total_x - width_half, total_y - height_half, width, height);

            var width = ctx.measureText(message).width + 18.0;
            var height = 22.0
            var width_half = width / 2.0;
            var height_half = height / 2.0;
            ctx.fillStyle = "#ffffff";
            ctx.fillRect(total_x - width_half, total_y - height_half, width, height);

            ctx.fillStyle = config[section][letter]["color"];
            ctx.fillText(message, total_x, total_y);
          }
        }
      }
      catch(err) {
        throw new Error("Invalid config");
      }
      return expanded

    }

    function sum_array(temp) {
      var total = 0;
      for(var index = 0; index < temp.length; index++) {
          total += temp[index];
      }
      return total;
    }

    // Find diagram DOM object and configure HTML5 canvas
    var diagram = document.getElementById("diagram");
    var ctx = diagram.getContext("2d");
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";

    var EXPANDED = expand_config(config);
    var BASE_NUM_ROWS = 15
    var BASE_ROW_HEIGHT = -2000
    var BASE_ROW_CENTER = document.getElementById("diagram").offsetWidth / 2.0;
    var BASE_ROW_RADIUS = 2150
    var BASE_ROW_WIDTH = 6
    var BASE_ROW_COLOR = "grey"
    var BASE_POINT_RADIUS = 7

    var DRAW_ROW_BLACK_DOTS = false;
    var DRAW_ROW_CENTER_LABELS = false;

    // Render title
    ctx.font = "bold 20pt sans-serif";
    ctx.fillText(title, BASE_ROW_CENTER-250, 50);

    // Render left note
    ctx.font = "bold 12pt sans-serif";
    ctx.fillStyle = "#d000d0";
    ctx.fillText(note_left, 150, 50);

    // Render right note
    ctx.font = "bold 12pt sans-serif";
    ctx.fillStyle = "#333333";
    ctx.fillText(note_right, 625, 50);

    // Render front of room legend
    ctx.font = "italic 10pt sans-serif";
    ctx.fillText("Front of Room", BASE_ROW_CENTER, 120);

    // Render back of room legend
    ctx.font = "italic 10pt sans-serif";
    ctx.fillText("Back of Room", BASE_ROW_CENTER, 490);

    // Render arrows
    // render_arrow("left");
    // render_arrow("middle");
    // render_arrow("right");

    // Render rows and points
    for(var row = 1; row <= BASE_NUM_ROWS; row++) {
      render_row(row);
    }

    // Render zone labels
    render_zone_labels(config);

    // Render to image
    // document.getElementById("image").src = diagram.toDataURL();

    // Print seats used
    // var temp = [];
    // for(var letter in used) {
    //   temp.push(letter)
    // }
    // temp.sort();
    // container = document.getElementById("seats")
    // var total = 0;
    // for(var index in temp) {
    //   var letter = temp[index];
    //   container.innerHTML += letter + " SAGE 3303 " + used[letter] + "\n";
    //   total += used[letter];
    // }
    //
    // // Get total number of seats
    // var all = 0;
    // all += sum_array(seats["left"]);
    // all += sum_array(seats["middle"]);
    // all += sum_array(seats["right"]);
    //
    // container.innerHTML += "\nTOTAL: " + total + "\n";
    // container.innerHTML += "UNUSED: " + (all - total) + "\n";
  </script>
</div>
